<template lang="">
  <div>
    <!-- 全局选择器 -->
    <!-- <A>
      <div class="a">私人定制DIV</div>
    </A> -->
  </div>
  <!-- <div class="div">
    动态CSS
  </div> -->

  <div :class = "[$style.div,$style.border]">
    module选择器
  </div>

</template>

<script setup lang="ts">
import { useCssModule } from 'vue';
const css = useCssModule()
console.log(css)

</script>


<style module>
.div{
  color: red;
}

.border{
  border: 1px solid #ccc;
}

</style>






<!-- 动态样式
<script lang="ts" setup>
import A from './components/A.vue'
import { ref } from 'vue';

const style = ref({
  color: 'red'
})

setTimeout(() => {
  style.value.color = 'blue'
}, 2000)

</script>

<style scoped>
.div {
  color: v-bind('style.color');
}
</style> -->


<!-- 全局选择器 -->
<!-- <style>
  div{
    color:red;
  }
</style> -->

<!-- <style scoped>
:global(div){
  color: green;
}
</style> -->